<template>
	<view class="container">
		<view class="top-banner">
			<image src="/static/img_74.png" mode=""></image>
		</view>
		<view class="computedfee">
			<view class="computedfee-item">
				<text class="computedfee-title">房屋城市</text>
				<view class="computedfee-right">
					<view class="select-house-area">
                        <input type="text" value="" placeholder="请选择房屋所在地区" disabled="true" v-model="housearea" @tap="openSelectarea()"/>
						<u-icon name="/static/icon_jr_76.png" size="15"></u-icon>
					</view>
					<view class="input-house-mj">
						<input type="number" value="" placeholder="请输入房屋面积"/>
						<u-icon name="/static/111.png" size="30"></u-icon>
					</view>
				</view>
			</view>
			<view class="computedfee-item">
				<text class="computedfee-title">房屋户型</text>
				<view class="computedfee-right">
					<view class="input-house-type">
						<view class="input-house-typeitem">
							<u-number-box v-model="nrooms" :max="10"></u-number-box>
							<text>室</text>
						</view>
						<view class="input-house-typeitem">
							<u-number-box v-model="nting" :max="10"></u-number-box>
							<text>厅</text>
						</view>
					</view>
					<view class="input-house-type">
						<view class="input-house-typeitem">
							<u-number-box v-model="nchu" :max="10"></u-number-box>
							<text>厨</text>
						</view>
						<view class="input-house-typeitem">
							<u-number-box v-model="nwei" :max="10"></u-number-box>
							<text>卫</text>
						</view>
					</view>
					<view class="input-house-type">
						<view class="input-house-typeitem">
							<u-number-box v-model="ntai" :max="10"></u-number-box>
							<text>台</text>
						</view>
					</view>
				</view>
			</view>
			<view class="computedfee-item">
				<text class="computedfee-title">有无电梯</text>
				<view class="computedfee-right">
					<u-radio-group >
						<u-radio shape="circle" active-color="rgba(255, 158, 93, 1)" name="have">有</u-radio>
						<u-radio shape="circle" active-color="rgba(255, 158, 93, 1)" name="nothave">无</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="compute-btn">
				<text>立即计算</text>
			</view>
		</view>
		<view class="richimage">
			<rich-text :nodes="richimg"></rich-text>
		</view>
		<city-select v-model="showSelectadd" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
	import citySelect from './u-city-select.vue';
	export default {
		components: {
			citySelect
		},
		data() {
			return {
				nrooms:0,
				nting:0,
				nchu:0,
				nwei:0,
				ntai:0,
				ishavedt:-1,
				richimg:'<img src="/static/img_8002.png" style="width:100%"/>',
				showSelectadd:false,
				housearea:''
			}
		},
		methods: {
			cityChange(e){
				this.housearea = `${e.province.label}${e.city.label}${e.area.label}`;
			},
			openSelectarea(){
				this.showSelectadd=true;
			}
		}
	}
</script>

<style lang="scss">
    page{
		width: 100%;
		height: 100%;
	}
	.container{
		width: 100%;
		min-height:100%;
		.top-banner{
			width: 100%;
			height: 320rpx;
			image{width: 100%;height: 100%;}
		}
		.computedfee{
			width: 710rpx;
			height: auto;
			padding-top: 30rpx;
			padding-bottom: 40rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow: 0px 0px 22px 2px rgba(0, 0, 0, 0.08);
			position: relative;
			left: 20rpx;
			top: -50rpx;
			.computedfee-item{
				display: flex;
				width: 650rpx;
				margin: auto;
				height: auto;
				.computedfee-title{line-height: 90rpx;font-size: 28rpx;color: rgba(34,34,34,1);}
				.computedfee-right{
					flex: 1;
					margin-left: 20rpx;
					height: auto;
					view{height: 90rpx;display: flex;border-bottom: 1rpx solid #F1F1F1;align-items: center;}
					.select-house-area{
						justify-content: space-between;
						input{flex: 1;font-size: 28rpx;}
					}
					.input-house-mj{
						justify-content: space-between;
						font-size: 28rpx;
						input{flex: 1;font-size: 28rpx;}
					}
					.input-house-type{display: flex;}
					.input-house-typeitem{
						width: 50%;
						display: flex;
						justify-content: space-around;
					}
				}
			}
			.compute-btn{background-color: rgba(14, 174, 100, 1);color: #FFFFFF;font-size: 28rpx;border-radius: 10rpx;width: 650rpx;height: 80rpx;display: flex;justify-content: center;align-items: center;margin: auto;margin-top: 30rpx;}
		}
		.richimage{
			width: 100%;
			height: auto;
			margin-top: 20rpx;
		}
	}
</style>
